<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        placeholder="请输入任务名称"
        autofocus
        @keyup.enter="addList"
        v-model.trim="todoName"
      />
      <!-- 按下回车触发addList输入内容功能 -->
    </header>
  </section>
</template>

<script>
export default {
  name: 'TodoToubu',
  data() {
    return {
      todoName: '',
    }
  },
  watch: {},
  methods: {
    addList() {
      this.$emit('addList', this.todoName)
      return (this.todoName = '')
    },
  },
}
</script>

<style scoped></style>
